<template>
    <div class="titleHeader" :style="{ color: color, backgroundColor: bgColor }">
        <div class="view view--l" @click="goBack">
            <i class="icon-back"></i>
        </div>
        <div class="view">
            <p class="title" v-if="title">{{ title }}</p>
            <slot name="title" />
        </div>
        <div class="view view--r">
            <slot name="right" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'titleHeader',
    props: {
        title: String,
        color: String,
        bgColor: {
            type: String,
            default: 'white'
        },
        back: {
            // 是否退出页面
            type: Boolean,
            default: false
        },
        steps: {
            // 后台步数
            type: Number,
            default: -1
        }
    },
    methods: {
        goBack() {
            this.back && this.JSBridge.callHandler('goBack');
            this.$router.go(this.steps);
        }
    }
};
</script>

<style lang="scss" scoped>
@import '@/styles/index.scss';

.titleHeader {
    position: relative;
    @extend .l-header;
    padding: 0 18vw;

    .view {
        @extend .l-flex;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
        height: 100%;

        .title {
            font-weight: bold;
            font-size: 4.53vw;
            padding: 0.5vw 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
        }
        &--l {
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
            margin-left: 6.4vw;
            width: auto;
            font-size: 3.47vw;
            color: #8e9099;
            .icon-back {
                width: 3.73vw;
                height: 3.73vw;
                background: url(/static/icon/icon_back.png) no-repeat;
                background-size: contain;
            }
        }
        &--r {
            position: absolute;
            height: 100%;
            top: 0;
            right: 0;
            margin-right: 6.4vw;
            width: auto;
            font-size: 3.47vw;
            color: #8e9099;
        }
    }

    &.no-mr {
        .view--r {
            margin-right: 0;
        }
    }
}
</style>
